<template>
  <div>
        <div style="margin: 10px 0px 20px 0;">
          <span style="font-size:14px">按条件查询：</span>
          <el-input
            clearable
            size="mini"
            style="width:200px"
            placeholder="请输入设备地址号"
            v-model="adressInput"
            class="input-with-select"
          ></el-input>

          <el-button style="margin-left: 10px" size="mini" type="primary" @click="searchData">查询</el-button>
          <span v-if="this.searchFlag" style="font-size:14px;margin-left:10px">
            查询到
            <span style="color:red">{{this.searchNums}}</span>条数据
          </span>
          <el-button
            v-if="this.searchFlag"
            style="margin-left: 10px"
            size="mini"
            type="primary"
            @click="backList"
          >返回原列表</el-button>
        </div>
        <!-- 顶部控制按键 -->
        <ul class="rowlist" v-permission="'/button'">
          <li>
            <el-button size="small" v-permission="'/button'" type="primary"   @click="setcontrolsons(1)" plain>设备开</el-button>
          </li>
          <li>
            <el-button size="small" v-permission="'/button'" type="primary"   @click="setcontrolsons(0)" plain>设备关</el-button>
          </li>
          <li>
            <el-button size="small" type="success" @click="reflshdata" plain>立刻刷新</el-button>
          </li>
        </ul>


    <el-table
      ref="multipleTable"
      :data="contDate"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <!-- <el-table-column label="日期" width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column> -->
      <el-table-column prop="centralizedId" width="190" label="所属集控器编号"></el-table-column>
      <el-table-column prop="deviceAddress" label="设备地址"></el-table-column>

      <el-table-column prop="deviceStatus" label="状态">
            <i
              slot-scope="scope" 
              v-if="scope.row.deviceStatus ==1 || scope.row.deviceStatus ==238"
              class="el-icon-success"
              style="color:lightgreen;font-size: 20px;"
            ></i>
            <i slot-scope="scope" v-else class="el-icon-error" style="color:#999;font-size: 20px;"></i>
      </el-table-column>

      <el-table-column prop="relayStatusOne" label="开关1">
            <el-switch
            disabled
              slot-scope="scope"
              v-model="scope.row.relayStatusOne"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value='1'
                :inactive-value='0'
              @change="switchchange(scope.row,1)">
            </el-switch>
          </el-table-column>
          <el-table-column prop="relayStatusTwo" label="开关2">
            <el-switch
            disabled
              slot-scope="scope"
              v-model="scope.row.relayStatusTwo"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value='1'
                :inactive-value='0'
              @change="switchchange(scope.row,2)">
            </el-switch>
          </el-table-column>
          <el-table-column prop="relayStatusThree" label="开关3">
            <el-switch
            disabled
              slot-scope="scope"
              v-model="scope.row.relayStatusThree"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value='1'
                :inactive-value='0'
              @change="switchchange(scope.row,3)">
            </el-switch>
          </el-table-column>
          <el-table-column prop="relayStatusFour" label="开关4">
            <el-switch
            disabled
              slot-scope="scope"
              v-model="scope.row.relayStatusFour"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value='1'
                :inactive-value='0'
              @change="switchchange(scope.row,4)">
            </el-switch>
          </el-table-column>
          <el-table-column prop="relayStatusFive" label="开关5">
            <el-switch
            disabled
              slot-scope="scope"
              v-model="scope.row.relayStatusFive"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value='1'
                :inactive-value='0'
              @change="switchchange(scope.row,5)"> 
            </el-switch>
          </el-table-column>
          <el-table-column prop="relayStatusSix" label="开关6">
            <el-switch
            disabled
              slot-scope="scope"
              v-model="scope.row.relayStatusSix"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value='1'
                :inactive-value='0'
              @change="switchchange(scope.row,6)">
            </el-switch>
          </el-table-column>
          <el-table-column prop="relayStatusSeven" label="开关7">
            <el-switch
            disabled
              slot-scope="scope"
              v-model="scope.row.relayStatusSeven"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value='1'
                :inactive-value='0'
              @change="switchchange(scope.row,7)">
            </el-switch>
          </el-table-column>
          <el-table-column prop="relayStatusEight" label="开关8">
            <el-switch
            disabled
              slot-scope="scope"
              v-model="scope.row.relayStatusEight"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value='1'
                :inactive-value='0'
              @change="switchchange(scope.row,8)">
            </el-switch>
          </el-table-column>


    </el-table>
  </div>
</template>

<script>
import { number } from 'echarts'; 
import {setControlsons,getcontlists} from '../../request/api'
import { successmsg } from '../../tools/tools';

export default {
  data() {
    return {
      searchNums: "", // 查询到的数量
      searchFlag: false, // 查询结果显示与隐藏
      adressInput:'',//地址搜索框数据
      sonArr:[],
      contDate:[], //子节点数据
      centralizedDeviceName:'',
      centralizeddata:{},
      multipleSelection: []
      }
  },
  mounted() {
    // 子节点数据
    this.getcontlist()

    setInterval(() => {
      this.getcontlist()
    }, 10000);
    // console.log(this.$route.query.deviceName,'1111');
  },
  methods: {
    // 刷新
    reflshdata(){
      this.centralizeddata ={}
      // 子节点数据
      this.getcontlist()
    },
    // 查询
    searchData(){
      this.centralizeddata ={}
      if(this.adressInput){
        this.centralizeddata.deviceAddress = this.adressInput
      }
    
      // 子节点数据
      this.getcontlist()
    },
    // 子节点八路开关多选控制
    setcontrolsons(num){
      this.sonArr= []
      this.multipleSelection.map((value, index) => {
      let obj = {
        "centralizedId": value.centralizedId,
        "deviceAddress": value.deviceAddress,
        "switchOne": Number(num),
        "switchTwo": Number(num),
        "switchThree": Number(num),
        "switchFour": Number(num),
        "switchFive": Number(num),
        "switchSix": Number(num),
        "switchSeven": Number(num),
        "switchEight":Number(num),
      }
      this.sonArr.push(obj)
    });
    setControlsons(this.sonArr).then(d=>{
        if(d.code == '0000'){
          // 刷新数据
          setTimeout(() => {
            this.reflshdata()
            successmsg('操作成功')
          }, 6000);
        }else{
        failmsg('操作失败')
      }
      }).catch(e=>{
        console.log('子节点控制接口调用失败');
      })
    },
    // 子节点八路开关
    switchchange(s,num){
      let obj = {
        "centralizedId": s.centralizedId,
        "deviceAddress": s.deviceAddress,
        "switchOne": Number(s.relayStatusOne),
        "switchTwo": Number(s.relayStatusTwo),
        "switchThree": Number(s.relayStatusThree),
        "switchFour": Number(s.relayStatusFour),
        "switchFive": Number(s.relayStatusFive),
        "switchSix": Number(s.relayStatusSix),
        "switchSeven": Number(s.relayStatusSeven),
        "switchEight":Number(s.relayStatusEight),
      }
      if (num == 1) {
         this.sonArr =[]
         obj.switchOne =Number(s.relayStatusOne);
       }
       if (num == 2) {
         this.sonArr =[]
         obj.switchTwo = Number(s.relayStatusTwo);
       }
       if (num == 3) {
         this.sonArr =[]
         obj.switchThree = Number(s.relayStatusThree);
       }
       if (num == 4) {
         this.sonArr =[]
         obj.switchFour =  Number(s.relayStatusFour);
       }
       if (num == 5) {
         this.sonArr =[]
         obj.switchFive = Number(s.relayStatusFive);
       }
       if (num == 6) {
         this.sonArr =[]
         obj.switchSix = Number(s.relayStatusSix);
       }
       if (num == 7) {
         this.sonArr =[]
         obj.switchSeven = Number(s.relayStatusSeven);
       }
       if (num == 8) {
         this.sonArr =[]
         obj.switchEight = Number(s.relayStatusEight);
       }
       this.sonArr.push(obj)
      setControlsons(this.sonArr).then(d=>{
        if(d.code == '0000'){
          setTimeout(() => {
             // 刷新数据
           this.reflshdata()
            successmsg('操作成功')
          }, 6000);
        }else{
        failmsg('操作失败')
      }
      }).catch(e=>{
        console.log('子节点控制接口调用失败');
      })
     
    },
    getcontlist(){
     
      // this.centralizedDeviceName = this.$route.query.deviceName
      // this.centralizeddata.centralizedId = this.$route.query.deviceName
      getcontlists(this.centralizeddata).then(d=>{
        if(d.code == '0000'){
          // let data = JSON.stringify(d.data.records)
          // this.contDate = JSON.parse(data)
          this.contDate = d.data


          // console.log( this.contDate[0].relayStatusEight,' this.contDate[0].relayStatusEight');

          // let t = typeof(this.contDate[0].relayStatusEight)
          // console.log( t,'type');

          // let t2 = typeof(this.contDate[0].relayStatusFour)
          // console.log( t2,'type');

          // console.log( this.contDate[0],'this.contDate');
        }
        
      })
    },
    handleSelectionChange(val) {
        this.multipleSelection = val;
      }
}
};
</script>

<style scoped>
.rowlist {
  overflow: auto;
  display: flex;
  align-items: center;
}
.rowlist li {
  margin: 5px;
  width: 80px;
}
</style>
